import { Ref, defineComponent, onMounted, reactive, ref } from "vue";
import classes from "./index.module.scss"

import Table, { GridType } from "@/components/Table";
import apiStore from "@/stores/apiStore";
import { WorkArea } from "@/components/WorkArea";
import { ConditionItemType, ToolsItemType } from "@/hooks/useElementFormItem";
import { useTable } from "@/hooks/useTable";
import { onEnterKeydown } from "@/hoc/onEnterDown";
import {TypeDialog, TypeTitleType } from "./module/typeDialog"
import { ElMessage } from "element-plus";
import { useElMessageBox } from "@Tea/utils"
import MenuIndex from "@/components/MenuIndex";
import { TypeListType } from "@Tea/model";
import { httpCommonHandle } from "@/utils/httpUtils";

const Type = defineComponent({
  setup(props, ctx) {
    const tableName = "tpyeList"
    const { tableLoading, getSelected,handleOneRow, commonSearch } = useTable(tableName)
    const { getTypeList,delType } = apiStore().api

    const visible = ref(false) // 弹框显示
    const dialogTitle = ref<TypeTitleType>("新增类别") // 弹框标题

    // 搜索条件
    const searchForm = reactive({
      typeName: "",
      typeCode: ""
    })

    // form
    const ruleForm = reactive<typeof searchForm>({
      typeCode: "",
      typeName: ""
    })
    
    /**
     * @vuese 查询
     */
    const searchData = async () => {
      commonSearch(getTypeList(searchForm))
    }

    // 操作成功
    const handleSuccess = (ctrlShow:Ref<boolean>) => {
      ctrlShow.value = false
      searchData()
    }

    /**
     * @use 新增
     */
    const add = () => {
      visible.value = true
      dialogTitle.value = "新增类别"
    }
    /**
     * @use 编辑
     */
    const edit = () => {
      const selectRow = getSelected()[0] as typeof searchForm
      if (selectRow) {
        Object.assign(ruleForm, selectRow)

        visible.value = true
        dialogTitle.value = "编辑类别"
      } else {
        ElMessage({
          message: '请选择一条数据',
          type: 'warning',
        })
      }
    }

    // 点击删除
    const deleltPoisition = () => {
      handleOneRow<TypeListType>((data) => {
        useElMessageBox({
          content: `确定要删除该数据吗？`,
          thenCallback: () => {
            httpCommonHandle({
              loading: tableLoading,
              callBack:() => delType (data.typeId),
              onSuccess: searchData
            })
          }
        })
      })
    };

    // 创建工具的配置
    const toolsList: ToolsItemType[] = [
      {
        type: "button", content: "新增", attr: {
          onClick: add
        }
      },
      {
        type: "button", content: "编辑", attr: {
          onClick: edit
        }
      },
      ,
      {
        type: "button", content: "删除", attr: {
          onClick: deleltPoisition
        }
      }
    ]
    // 创建搜索条件的配置
    const condition: ConditionItemType<typeof searchForm>[] = [
      {
        type: "text",
        vModel: searchForm,
        feild: "typeCode",
        label: "类别编码",
        labelWidth:'5rem',
        col: 6,
        attr: {
          placeholder: "类别编码",
          onClear: searchData,
          onKeydown: (e: KeyboardEvent) => onEnterKeydown(e, searchData)
        }
      },
      {
        type: "text",
        feild:"typeName",
        vModel: searchForm,
        col: 6,
        label: "类别名称",
        labelWidth:'5rem',
        attr: {
          placeholder: "类别名称",
          onClear: searchData,
          onKeydown:(e:KeyboardEvent) => onEnterKeydown(e, searchData)
        }
      }
    ]
    // agGrid 配置项
    const gridAttr: GridType = {
      columnDefs: [
        { headerName: "类别编码",checkboxSelection:true, field: "typeCode", width: 250 },
        { headerName: "类别名称", field: "typeName", width: 250 },
      ],
      rowSelection:"single"
    }

    onMounted(() => {
      searchData()
    })

    return () => (
      <div class={`m-window m-fullBox p-right ${classes.positionList}`}>
        <header class={`m-bottom ${classes.listHeader}`}>
          <WorkArea
            tools={toolsList}
            condition={condition}
            onSearch={searchData}
          >
          </WorkArea>
        </header>
        <Table
          v-loading={tableLoading.value}
          gridAttr={gridAttr}
          tableName={tableName}
          initPagination={false}
        ></Table>
        
        <TypeDialog
          visible={visible}
          title={dialogTitle.value}
          ruleForm={ruleForm}
          handleSuccess={() => handleSuccess(visible)}
        >
        </TypeDialog>
      </div>
    )
  },
})

export default defineComponent({
  name: "typeManage",
  setup(props, ctx) {
    return () => <MenuIndex>
      <Type class='m-padding'></Type>
    </MenuIndex>
  },
})